<template>
  <a-layout-sider :collapsed="props.collapsed" :trigger="null" collapsible>
    <div v-if="collapsed" class="logoTit">控台</div>
    <div v-else class="logoTit">里欧12306控台</div>
    <!-- <a-menu v-model:selected-keys="selectedKeys" theme="dark" mode="inline">
      <a-menu-item
        v-for="item in menuRoutes"
        :key="item.path"
        @click="() => router.push(item.path)"
      >
        <component :is="item.meta.icon" v-if="item.meta.icon" />
        <user-outlined v-else />
        <span>{{ item.meta.title }}</span>
      </a-menu-item>
    </a-menu> -->
    <a-menu
      v-model:selected-keys="selectedKeys"
      theme="dark"
      :open-keys="['batch', 'base', 'business', 'member']"
      mode="inline"
      :style="{ height: '100%', borderRight: 0 }"
    >
      <a-menu-item key="/welcome">
        <router-link to="/welcome">
          <div v-if="collapsed">
            <coffee-outlined />
          </div>
          <div v-else>
            <coffee-outlined />
            &nbsp; 欢迎
          </div>
        </router-link>
      </a-menu-item>
      <a-sub-menu key="member">
        <template #title>
          <span>
            <UnorderedListOutlined />
            会员管理
          </span>
        </template>
        <a-menu-item key="/member/ticket">
          <router-link to="/member/ticket">
            <MenuUnfoldOutlined />
            会员车票
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="business">
        <template #title>
          <span>
            <UnorderedListOutlined />
            业务管理
          </span>
        </template>
        <a-menu-item key="/business/skToken">
          <router-link to="/business/skToken">
            <MenuUnfoldOutlined />
            &nbsp; 令牌余量
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/confirmOrder">
          <router-link to="/business/confirmOrder">
            <MenuUnfoldOutlined />
            &nbsp; 订单信息
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/dailyTrainTicket">
          <router-link to="/business/dailyTrainTicket">
            <MenuUnfoldOutlined />
            &nbsp; 余票信息
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/dailyTrain">
          <router-link to="/business/dailyTrain">
            <MenuUnfoldOutlined />
            &nbsp; 每日车次
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/dailyTrainInfo">
          <router-link to="/business/dailyTrainInfo">
            <MenuUnfoldOutlined />
            &nbsp; 每日车站
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/dailyCarriage">
          <router-link to="/business/dailyCarriage">
            <MenuUnfoldOutlined />
            &nbsp; 每日车厢
          </router-link>
        </a-menu-item>
        <a-menu-item key="/business/dailySeat">
          <router-link to="/business/dailySeat">
            <MenuUnfoldOutlined />
            &nbsp; 每日座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="base">
        <template #title>
          <span v-if="collapsed"><UnorderedListOutlined /></span>
          <span v-else>
            <UnorderedListOutlined />
            基础数据
          </span>
        </template>
        <a-menu-item key="/base/station">
          <router-link to="/base/station">
            <MenuUnfoldOutlined />
            &nbsp; 车站管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/train">
          <router-link to="/base/train">
            <MenuUnfoldOutlined />
            &nbsp; 火车管理
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/trainInfo">
          <router-link to="/base/trainInfo">
            <MenuUnfoldOutlined />
            &nbsp; 火车车站
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/carriage">
          <router-link to="/base/carriage">
            <MenuUnfoldOutlined />
            &nbsp; 火车车厢
          </router-link>
        </a-menu-item>
        <a-menu-item key="/base/seat">
          <router-link to="/base/seat">
            <MenuUnfoldOutlined />
            &nbsp; 火车座位
          </router-link>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="batch">
        <template #title>
          <span v-if="collapsed">
            <FieldTimeOutlined />
          </span>
          <span v-else>
            <FieldTimeOutlined />
            跑批管理
          </span>
        </template>
        <a-menu-item key="/batch/job">
          <router-link to="/batch/job">
            <MenuUnfoldOutlined />
            &nbsp; 任务管理
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-layout-sider>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
const props = withDefaults(
  defineProps<{
    collapsed: boolean;
  }>(),
  {
    collapsed: false,
  }
);

// 菜单路由实现
//#region
const route = useRoute();
// 选中的菜单项，根据当前路由
const selectedKeys = computed(() => {
  // 当前路由的path
  return [route.path];
});
//#endregion
</script>
